<!DOCTYPE html>
<html >
<head >
<title>菜品管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css"  media="all"/>
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all"/>
<link rel="stylesheet"  href="../../../css/common/loader.css" media="all"/>
<link rel="stylesheet"  href="../../../css/common/openshow.css" media="all"/>
</head>
<style>
	html{
		background-color:#fff;
		height: 100%;
		border-bottom: 2px solid #f2f2f2;
		box-sizing: border-box;
	}
	/* 上传照片样式 */
	.img-box button,.img-box .imgItem{display: inline-block;position: relative;}
	.img-box button:hover {border-color: #009688;cursor: pointer;}
	.img-box button>img,.img-box .imgItem>img{width: 140px;height: 140px;}
	.img-box button,.img-box .imgItem{
		height: 140px;
		width: 140px;
		border: 2px solid #eee;
		box-sizing: border-box;
	}
	.layui-form-pane .table-box{margin-left:0;min-height:0;}
	.specs-btn{margin-left:30px;}
	.layui-form-pane .photo-label{height: 140px;line-height:120px;}
	.layui-table{display: none;}
</style>
<body>
<div class="layui-fluid">
		<div class="layui-card">
		<form class="layui-form layui-form-pane" id="saveForm" lay-filter="saveForm">
			<input type="hidden" name="menuId" value="" id="menuId">
			<input type="hidden" name="languageType" value="1" id="languageType">
			<!-- 菜品id -->
			<input type="hidden" name="menuIndexId" value="" id="menuIndexId">
			<input type="hidden" name="sortNo" id="sortNo">
			<!-- 菜单id -->
			<input type="hidden" name="catalogIndexId" value="" id="catalogIndexId">
			<div class="layui-form-item" >
			    <label class="layui-form-label">言語</label>
				<div class="layui-btn-group" id="languageDiv"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">メニュー</label>
				<div class="layui-input-inline">
					<input type="text" name="menuName" placeholder="メニュー名を入力してください" lay-verify="required|max:50" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">番号</label>
				<div class="layui-input-inline">
					<input type="text" name="menuNum"  lay-verify="integer|minInt:1|maxInt:1000" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">印字名称</label>
				<div class="layui-input-inline">
					<input type="text" name="shortName"  lay-verify="max:50" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">価格</label>
				<div class="layui-input-inline">
					<input type="text" name="menuPrice" placeholder="価格を入力してください" lay-verify="required|integer|minInt:0|maxInt:10000000" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<div class="layui-form-item">
			
				<label class="layui-form-label">原価</label>
				<div class="layui-input-inline">
					<input type="text" name="costPrice" placeholder="原価を入力してください" lay-verify="required|integer|minInt:0|maxInt:10000000" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">ジャンル</label>
				<div class="layui-input-inline">
					<select name="menuType" lay-select-dict="food_type"  lay-select-title="NONE" lay-select-code="1" class="price-input">
								
				</select>
				</div>
				<label class="layui-form-label">時間帯</label>
				<div class="layui-input-inline">
					<select name="mealType" lay-select-dict="meal_type" lay-select-title="NONE" lay-select-code="1"   class="price-input">
								
					</select>
				</div>
			</div>
			
			<!-- <div class="layui-form-item">
				<label class="layui-form-label">オプション</label>
				<div class="layui-input-block">
					<button class="layui-btn specs-btn" id="addSpecs">追加</button>
				</div>
			</div> -->
			<div class="layui-form-item">
				<!-- 表格数据 -->
				<script type="text/html" id="barDemo">
					<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
				  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>削除</a>
				</script>
				<div class="layui-input-block table-box">
					<!-- 隐藏规格数据框 用于添加规格时赋值 -->
					<input type="hidden" class="specsNameText"/>
					<input type="hidden" class="specsPriceText"/>
					<!-- td  规格ID    规格序列号id -->
					<input type="hidden" class="specId"/>  
					<input type="hidden" class="specIndexId"/>
					<table  cellspacing="0" cellpadding="0" border="0" class="layui-table" id="tableList">
						<thead><tr><th>名称</th><th>価格</th><th>編集</th></tr></thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-textarea-label photo-label">写真</label>
				<div class="layui-input-block img-box">
					<div class="imgItem">
						<img id="menuImg" src="" alt="">
					</div>
					<button type="button" class="layui-btn" id="selectPto">写真を追加</button>
					<button type="button" class="layui-btn layui-btn-danger" id="removeImageBtn">削除</button>
					<!-- <button type="button" class="layui-btn" id="uploadPto">上传照片</button> -->
					<!-- 隐藏图片信息传值输入框 -->
					<input type="hidden" id="menuImage" name="menuImage" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-textarea-label">紹介</label>
				<div class="layui-input-block">
					<textarea  lay-verify="max:2000" class="layui-textarea" name="menuIntroduce"></textarea>
				</div>
			</div>
			<!-- 隐藏域 -->
			<div class="layui-form-item" style="display:none;">
			  <button class="layui-btn"  lay-submit="" lay-filter="saveSubmit">提交</button>
			</div>
		</form>
	</div>
</div>
<script   src="../../../layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="../../../lib/jQuery-2.2.0.min.js" ></script>
	<script>
		layui.config({
			base :  '../../../layuiadmin/' //静态资源所在路径
		}).extend({
			webplus : 'lib/webplus', //主入口模块
		}).use([ 'form','webplus', 'upload' ], function() {
		    var $ = layui.$, form = layui.form,upload = layui.upload,  webplus=layui.webplus;
		    webplus.initSelect('saveForm');
			var $catalogIndexId = $('#catalogIndexId'),
					$menuIndexId = $('#menuIndexId'),
					$menuId = $('#menuId'),
					$languageType = $("#languageType");
					
			var urlData= webplus.getUrlType();
			//设置菜单索引id 
			$catalogIndexId.val(urlData.catalogIndexId);
			// 初始化语言 	
			webplus.doAjax('buss/menuCatalog/listLanguage','','','',3,function(data){
				var htmlStr='';
				for(var i=0;i<data.dataList.length;i++){
					var dict=data.dataList[i];
					if("1"==dict.itemCode){
						htmlStr+='<button type="button" data-code="'+dict.itemCode+'" class="layui-btn">'+dict.itemName+'</button>';
					}else{
						htmlStr+='<button type="button" data-code="'+dict.itemCode+'" class="layui-btn layui-btn-primary">'+dict.itemName+'</button>';
					}
				}
				$("#languageDiv").html(htmlStr);
				// 切换语言 
				$("#languageDiv>button").click(function(){
					var _this = $(this);
					var languageType = _this.data('code');
					//如果catalogIndexId为空,说明没有添加过日本语,禁用其他语言
					if(webplus.isEmpty($menuIndexId.val())){
						$("#languageDiv>button:gt(0)").prop("disabled",true).addClass("layui-btn-disabled");
						/* $("#addSpecs").prop("disabled",false).removeClass("layui-btn-disabled"); */
						$(".price-input").prop("disabled",false).removeClass("layui-btn-disabled");
						return false;
					}
					//如果不是日本语则禁用添加规格按钮/禁用价格输入框

					if(languageType == "1" ){
						/* $("#addSpecs").prop("disabled",false).removeClass("layui-btn-disabled"); */
						$(".price-input").prop("disabled",false).removeClass("layui-btn-disabled");
					}else{
						//$("#addSpecs").prop("disabled",true).addClass("layui-btn-disabled");
						$(".price-input").prop("disabled",true).addClass("layui-btn-disabled");
					}
					// 如果当前按钮被选中
					if(_this.attr("class").indexOf('layui-btn-primary')<0) return false;
					// 设置语言
					$languageType.val(languageType);
					// 
					_this.removeClass('layui-btn-primary').siblings("button").attr('class','layui-btn layui-btn-primary');
					// 切换语言请求数据
					ajaxResultData(languageType);
				});
			});
			// 切换语言请求数据
			function ajaxResultData(languageType){
				var data = {
					languageType:languageType,
					menuIndexId:$menuIndexId.val()
				};
				webplus.doAjax('buss/menuDict/show',data,'','',3,function(res){
					var data = res.data;
					if(!webplus.isEmpty(data)){
						delete res.data['catalogIndexId'];
						delete res.data['sortNo'];
						delete res.data['menuIndexId'];
						delete res.data['languageType'];
						// 处理后的数据赋值
						if(!webplus.isEmpty(data.menuImage)){
							var imgSrc = webplus.cxt() +"/file/showImage?fileName=" +data.menuImage;
							   $("#menuImg").attr("src", imgSrc);
						}
					   webplus.setFormData("saveForm",res.data);
					}
					if(!webplus.isEmpty(res.dataList)){
						$(".layui-table").show();
						// 根据返回的值设置规格
						setTableData(res.dataList,languageType);
					}else{
						$(".layui-table").hide();
					}
					
				});
			}
			
			//
			
			
			// +-----------------------------
			// 打开添加规格弹出框   规格区域脚本--start
			// +-----------------------------
			var $tbody = $("#tableList>tbody");
			$("#addSpecs").click(function(){
				webplus.openWindow('addSpecs.html','追加','400','240');
				return false;
			});
			//编辑tr行
			$tbody.on("click",".edit-btn",function(){
				var $td = $(this).parent("td");
				var specsName = $td.prev().prev().text();
				var specsPrice = $td.prev().text();
				var languageType = $languageType.val();
				$td.attr("class","updateTdSpecs");
				
				var param = "?languageType="+encodeURIComponent(languageType)+"&name="+specsName+"&price="+specsPrice;
				// 打开编辑框
				webplus.openWindow('editSpecs.html'+param,'編集','400','240');
			});
			//删除tr行
			$tbody.on("click",".del-btn",function(){
				var _this = $(this);
				var $td = $(this).parent("td");
				
				layer.confirm('本欄の仕様を削除するか否か？',function(index){
					
					layer.close(index);
					var specId= $td.prev().prev().data("specid");
					if(!webplus.isEmpty(specId)){
						var paramData={};
						paramData.id=specId;
						webplus.doAjax('buss/menuDict/removeMenuSpec', paramData,'', '0');
					}
					_this.parents("tr").remove();
					if(webplus.isEmpty($tbody.html())){
						$(".layui-table").hide();
					}
					
					// 请求
					
				});
			});
			// +-----------------------------
			// 规格区域脚本---end
			// +-----------------------------
			
			
			// +-----------------------------
			// 文件上传
			// +-----------------------------
			var uploadInst = upload.render({
				elem: "#selectPto",
				exts: 'jpg|png|jpeg',
				data: {
					token: webplus.getToken(),
					filePrefix: 'M'
				},
				url: webplus.cxt() + '/file/uploadImage',
				done: function(res) {
					//如果上传成功
					if (res.appCode == '1') {
						layer.msg('完了');
						var imgSrc = webplus.cxt() +
							"/file/showImage?fileName=" +
							res.fileName;
						$("#menuImg").attr("src", imgSrc);
						$("#menuImage").val(res.fileName);
					}else{
						$("#menuImg").attr("src", "");
					}
				},
				error: function() {
					layer.msg('Error、タイムオーバー！');
				}
			});
			// 获取规格数据
			function getTableData(){
				var specsArr = [];
				if(webplus.isEmpty($tbody.html())){
					return specsArr;
				} 
				$tbody.find("tr").each(function(){
					console.log();
					specsArr.push(
					{
						specId:$(this).find("td:eq(0)").data("specid"),
						specIndexId:$(this).find("td:eq(1)").data("specindexid"),
						specName:$(this).find("td:eq(0)").text(),
						specPrice:$(this).find("td:eq(1)").text().replace(/,/g,"")
					}
					);
				});
				return JSON.stringify(specsArr);
			}
			
			// 设置规格
			function setTableData(res,type){
				var trHtml = '';
				if(webplus.isEmpty(res)){
					$("#tableList>tbody").html('');
					return false;
				}
				if(type == "1"){
					for(var i=0;i<res.length;i++){
						var data = res[i];
						trHtml += '<tr><td data-specid="'+data.specId+'">'+data.specName+'</td><td data-specindexid="'+data.specIndexId+'">'+webplus.number_format(data.specPrice,0,"",",")+'</td><td style="width:120px">'+
									'<a class="layui-btn layui-btn-xs edit-btn" ><i class="layui-icon layui-icon-edit"></i>編集</a>'+
									'<a class="layui-btn layui-btn-danger layui-btn-xs del-btn" lay-event="del"><i class="layui-icon layui-icon-delete"></i>削除</a>'+
								'</td></tr>';
					}
				}else{
					for(var i=0;i<res.length;i++){
						var data = res[i];
						trHtml += '<tr><td data-specid="'+data.specId+'">'+data.specName+'</td><td data-specindexid="'+data.specIndexId+'">'+webplus.number_format(data.specPrice,0,"",",")+'</td><td style="width:120px">'+
									'<a class="layui-btn layui-btn-xs edit-btn" ><i class="layui-icon layui-icon-edit"></i>編集</a>'+
								'</td></tr>';
					}
				}
				
				$("#tableList>tbody").html(trHtml);
			}
			
			// +-----------------------------
			// 提交表单
			// +-----------------------------
			
			form.on('submit(saveSubmit)', function(data) {
				var paramData = data.field;
				delete paramData['file'];
			/* 	if(webplus.isEmpty(paramData.menuImage)){
					webplus.alertError("写真をアップロードしてください。!");
					return false;
				} */
				// 获取规格表数据
				//paramData.menuSpecJson = getTableData();
				webplus.doAjax('buss/menuDict/save', paramData,'', '', '1',function(res){
					var data = res.data;
					// 如果是日本语
					if(paramData.languageType == "1"){
						parent.$("body").find('[lay-submit]').click();
						// 日语更新menuIndexId
						$menuIndexId.val(data.menuIndexId);
						$("#sortNo").val(data.sortNo);
						
						$("#languageDiv>button:gt(0)").prop("disabled",false).removeClass("layui-btn-disabled");
					}
					$menuId.val(data.menuId);
					//增加回显图片
					var fileName=data.menuImage;
					var imgSrc = webplus.cxt() +"/file/showImage?fileName="+fileName
					$("#menuImg").attr("src", imgSrc);
					$("#menuImage").val(fileName);
					//setTableData(res.dataList,paramData.languageType);
				});
				return false;
			});
			$("#removeImageBtn").click(function(){
		    	var menuIndexId=$("#menuIndexId").val();
		    	if(webplus.isEmpty(menuIndexId)){
		    		$("#menuImage").val();
		    		$("#menuImg").removeAttr("src");
		    		
		    		return ;
		    	}
		    	var param={};
		    	param.menuIndexId=menuIndexId;
		    	webplus.doAjax('buss/menuDict/removeMenuImage', param,'', '', '1',function(res){
		    		$("#menuImage").val();
		    		$("#menuImg").removeAttr("src");
		    	});
		    })
			
			
			
		});

	</script>
</body>
</html>